<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<div>
		<my-component>
			
		</my-component>
		<!-- 要注册一个全局组件，你可以使用 Vue.component(tagName, options) -->
	</div>
</div>
<script>
	// 组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件：
	Vue.component('my-component',{
		template : '<p @click="doClick">这是一个p标签</p>',
		data : function(){//这里的data属性必须是一个函数返回一个对象
			return {message:'你好啊，李金文'};
		},
		methods : {
			doClick : function(){
				console.log(this.$el);//p
				this.$el.innerHTML = this.message;
			}
		}
	});
	var vm = new Vue({
		el : "#root",
		data : {

		}
	})
</script>	
</body>
</html>